<template>
  <div class="bg-primary text-white py-1 overflow-hidden">
    <div class="container mx-auto px-2 flex items-center">
      <span class="font-bold mr-3 whitespace-nowrap">财经早报</span>
      <div class="overflow-hidden flex-1">
        <div class="animate-scroll" ref="scrollingContainer">
          <p v-for="(item, index) in newsList" :key="index" class="whitespace-nowrap py-1">
            {{ item }} <span class="mx-4">|</span> 
          </p>
          <p v-for="(item, index) in newsList" :key="`copy-${index}`" class="whitespace-nowrap py-1">
            {{ item }} <span class="mx-4">|</span> 
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ScrollingNews',
  data() {
    return {
      newsList: [
        '国务院批复：十地开展综合改革试点',
        '财政部：预计2024年财政收入将实现温和增长',
        '央行：保持流动性合理充裕 促进经济持续回升向好',
        '发改委：积极扩大有效投资 推动经济高质量发展'
      ],
      scrollInterval: null
    }
  },
  mounted() {
    this.startScrolling()
  },
  beforeUnmount() {
    if (this.scrollInterval) {
      clearInterval(this.scrollInterval)
    }
  },
  methods: {
    startScrolling() {
      const container = this.$refs.scrollingContainer
      let scrollPosition = 0
      
      this.scrollInterval = setInterval(() => {
        scrollPosition += 1
        if (scrollPosition > container.scrollHeight / 2) {
          scrollPosition = 0
        }
        container.scrollTop = scrollPosition
      }, 30)
    }
  }
}
</script>

<style scoped>
.animate-scroll {
  animation: scroll 30s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}
</style>